<template>
    <div class="content-body">
        <!-- <div id="我的收藏" v-show="favoriteList.length">
            <el-card shadow="hover" class="node-card">
                <div slot="header" class="clearfix">
                    <span slot="title" class="anchor">我的收藏<a href="#我的收藏">#</a></span>
                    <el-button @click="removeFavorite" icon="el-icon-delete" style="float: right;" type="text">清空</el-button>
                </div>
                <nav-collection :navData="favoriteList" :del=true :spinShow="spinShow"></nav-collection>
            </el-card>
        </div>
        <div id="常用网址" v-show="usedList.length">
            <el-card shadow="hover" class="node-card">
                <div slot="header" class="clearfix">
                    <span slot="title" class="anchor">常用网址<a href="#常用网址">#</a></span>
                    <el-button @click="removeUsed" icon="el-icon-delete" style="float: right;" type="text">清空</el-button>
                </div>
                <nav-nav :classData="usedList" :del=true :spinShow="spinShow"></nav-nav>
            </el-card>
        </div> -->
        <div :id="item.title"  v-for="(item,index) in data" :key="index" >
            <el-card shadow="hover" class="node-card" v-if="item.nav && item.nav.length > 0">
                <div slot="header" class="clearfix">
                    <span slot="title" class="anchor" :id="item.id">{{ item.title }}<a :href="'#' + item.title">#</a></span>
                    <span class="total">共计：{{ item.nav.length}}</span>
                </div>
                <nav-nav :classData="item" :subTitle="item.title" :editStatus="editStatus" :spinShow="spinShow"></nav-nav>
            </el-card>
        </div>
    </div>
</template>

<script>
import NavNav from '@/components/card/nav'
// import NavCollection from '@/components/card/collection'
import {mapGetters, mapActions} from 'vuex'
export default {
    props: {
        data: {
            default: {}
        },
        editStatus: {
            default: false
        },
        spinShow: {
            default: false
        }
    },
    computed: {
        ...mapGetters([
            'favoriteList',
            'usedList'
        ])
    },
    methods: {
        removeUsed () {
            this.removeUsedList()
            this.$Message.success('清空成功')
        },
        removeFavorite () {
            this.removeFavoriteList()
            this.$Message.success('清空成功')
        },
        ...mapActions([
            'removeUsedList',
            'removeFavoriteList'
        ])
    },
    components: {
        NavNav
    }
}
</script>

<style lang="less" scoped>
.content-body{
   background-color: #fff;
   box-shadow: 0 2px 12px 0 #cccccc;
   border-radius: 4px;
}
.anchor{
    font-size: 13px;
    font-weight: 700;
    color: #565656;
    a {
        opacity: 0;
        font-size: 24px;
        transition: opacity .2s ease-in-out;
        margin-left: 5px;
        position: relative;
        top: 2px;
    }
}
.total{
    font-size: 12px;
    color: #cccccc;
    float: right;
    padding: 8px 20px 0 0;
}
.node-card {
    // margin: 0 0 12px
    border: none;
}
</style>
